import { Component } from 'react'
import Message from './components/Message.js'
import './App.css';
export default class App extends Component{
  state = {
    nickname: '',
    message: '',
    messageList:[],
  }
  addMessage = () => {
    const {messageList,nickname,message} = this.state;
    messageList.push({
      id: Date.now(),
      nickname: nickname,
      message:message,
    })
    this.setState({
      messageList: messageList,
      nickname: '',
      message:'',
    })
  }

  delMessage = (id) => {
    const { messageList } = this.state
    this.setState({
      messageList:messageList.filter(item=>item.id!==id)
    })
  }

  render() {
    const { message,nickname,messageList } = this.state;
    return <section className="wrap">
    <h2 className="title">留言板</h2>
    <div className="addMessage">
        <input type="text" placeholder="请输入昵称" value={nickname} onChange={({target}) => {
          this.setState({
            nickname:target.value,
          })
        } }/>
        <textarea placeholder="请输入留言" value={message} onChange={({ target }) => {
          this.setState({
            message:target.value,
          })
        }}></textarea>
        <button onClick={this.addMessage}>提交留言</button>
    </div>
      <ul className="messageList">
        {messageList.map((item, index) => <Message delMessage={this.delMessage} message={item} key={ index }/>)}
    </ul>
</section>
  }
}